<template>
  <div>
    <div class="login-lay">
      <img src="../assets/img/logo.jpg" style="width: 150px;">
    </div>

    <Card class="login-content">
      <div slot="content">
        <span class="lng-flex">
          <x-input v-model="name" placeholder="请输入手机号码"></x-input>
        </span>

        <span class="lng-flex">
          <x-input v-model="name" placeholder="请输入验证码"></x-input>
          <div class="blue-button">发送验证码</div>
          <div class="blue-button" v-if="CountDown!=60" >{{CountDown}}s</div>
        </span>
        <x-input v-model="name" placeholder="请输入新密码"></x-input>
        <x-input v-model="name" placeholder="请再次输入新密码"></x-input>
      </div>
    </Card>

    <flexbox>
      <flexbox-item>
        <x-button type="primary" action-type="button" @click.native="handleSubmit">确定</x-button>
      </flexbox-item>
      <flexbox-item>
        <x-button type="primary" action-type="button" @click.native="goToBack">返回</x-button>
      </flexbox-item>
    </flexbox>

  </div>

</template>
<style scoped>
  .login-lay {
    margin-top: 60px;
    margin-bottom: 30px;
    text-align: center;
  }
  .login-content{
    margin-bottom: 10px;
  }
  .blue-button {
    float: right;
    padding: 2px 2px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
  }
</style>

<script>
  import {
    XInput,
    Card,
    CheckIcon,
    Flexbox,
    FlexboxItem,
    XButton
  } from 'vux'

  export default {
    components: {
      XInput,
      Card,
      CheckIcon,
      Flexbox,
      FlexboxItem,
      XButton
    },
    data () {
      return {
        name: '',
        CountDown: 60,
      }
    },
    methods: {
      handleSubmit(){
        this.$router.push({
          name: 'login',
        });
      },
      goToBack(){
        this.$router.push({
          name: 'login',
        });
      }
    },
    mounted(){

    }
  }
</script>
